import { defineStore } from "pinia";
import { i18n } from "@/locales";

export interface GlobalState {
  layout: string;
  elSize: "" | "small" | "default" | "large";
  locale: "zh-cn" | "en-us";
  primary: string;
  isGrey: boolean;
  isWeak: boolean;
  isCollapse: boolean;
  watermark: boolean;
  breadcrumb: boolean;
  tabs: boolean;
  footer: boolean;
  isThemeDrawer: boolean;
  themeMode: ThemeMode;
}
export type ThemeMode = "light" | "dark" | "system";

export const useGlobalStore = defineStore("globalStore", {
  state: (): GlobalState => ({
    // 布局
    layout: "default",
    // element 组件大小
    elSize: "default",
    // 当前系统语言
    locale: i18n.global.locale.value,
    // 主题颜色
    primary: "#006AFF",
    // 系统模式
    themeMode: "system",
    // 灰色模式
    isGrey: false,
    // 色弱模式
    isWeak: false,
    // 折叠菜单
    isCollapse: false,
    // 页面水印
    watermark: false,
    // 面包屑导航
    breadcrumb: true,
    // 标签页
    tabs: true,
    // 页脚
    footer: true,
    // 系统设置抽屉
    isThemeDrawer: false
  }),
  getters: {},
  actions: {
    setGlobalState<K extends keyof GlobalState>(key: K, value: GlobalState[K]) {
      this.$patch({ [key]: value });
    },
    setLocale(lang: GlobalState["locale"]) {
      this.locale = lang;
      i18n.global.locale.value = lang;
    }
  },
  persist: {
    key: "global",
    storage: localStorage
  }
});
